<template>
    <div class="left">
        <div class="leftTop">
            控件
            <div class="triangle"></div>
        </div>
        <div class="leftBorder"></div>
        <ul class="part">
            <li class="partLi" v-for="(item,index) in list" :key="index" @mousedown='partDown(index,$event)'>
                {{item.name}}
                <div class="partIco" :style="{backgroundPosition:item.x+' '+item.y}">
                <!-- <div class="partIco" > -->

                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: [
                    { dataType: 1, name: "多行输入框", x: '-20px', y: '-18px' },
                    { dataType: 2, name: "数字输入框", x: '-48px', y: '-18px' },
                    { dataType: 3, name: "单选框", x: '5px', y: '6px' },
                    { dataType: 4, name: "日期", x: '-21px', y: '6px' },
                    { dataType: 5, name: "日期区间", x: '-45px', y: '6px' },
                    { dataType: 6, name: "单行输入框", x: '5px', y: '-18px' },
                    { dataType: 7, name: "明细", x: '-48px', y: '-41px' },
                    { dataType: 8, name: "说明文字", x: '-75px', y: '-41px' },
                    { dataType: 9, name: "金额", x: '-21px', y: '-41px' },
                    { dataType: 10, name: "附件", x: '-72px', y: '6px' },
                    // { dataType: 11, name: "计算公式", x: '5px', y: '-66px' },
                ]
            };
        },
        methods: {
            //鼠标按下
            partDown(index, e) {
                e.stopPropagation();    //阻止冒泡
                e.preventDefault()      //阻止默认
                if (e.button == 2 || e.button == 1) {    //阻止右键和滚轮
                    return
                }
                drag.$emit("leftDown", this.list[index].dataType);
            }
        }
    };
</script>
<style scoped>
    .left {
        width: 350px;
        height: 620px;
        margin: 20px 30px 0;
    }

    .leftTop {
        width: 99px;
        height: 28px;
        border-radius: 2px;
        line-height: 28px;
        font-size: 15px;
        text-align: center;
        color: rgb(0, 0, 0);
        position: relative;
        background: #38adff;
    }

    .triangle {
        width: 1px;
        height: 1px;
        background: #38adff;
        border-right: 3px solid #38adff;
        border-bottom: 3px solid #38adff;
        border-left: 3px solid #38adff;
        border-top: 3px solid #38adff;
        transform: rotate(45deg);
        position: absolute;
        bottom: -2px;
        left: 45px;
    }

    .leftBorder {
        height: 1px;
        width: 290px;
        background: #38adff;
        margin-top: 4px
    }

    .part {
        width: 365px;
        height: 259px;
        display: flex;
        flex-wrap: wrap;
        margin-top: 24px;
        padding: 4px 0;
    }

    .partLi {
        border-radius: 4px;
        background-color:rgba(56, 173, 225,0.04);
        border: 1px dashed #38adff!important;
        margin: 0 15px 15px 0;
        width: 148px;
        height: 42px;
        font-size: 12px;
        line-height: 42px;
        text-align: left;
        padding-left: 15px;
        color: #38adff;
        position: relative;
        overflow: hidden;
    }

    .partIco {
        width: 24px;
        height: 24px;
        position: absolute;
        top: 9px;
        right: 12px;
        background-image: url('../../../../../static/img/小图标1.png') ;
        background-repeat: no-repeat;
        /* background-position:20px 10px;  */
    }
</style>